@extends('mobile.common.main')
@section('container')
<div class="ty-con">
    <div class="ty-img">
        <img src="/img/m/927/news-banner.jpg">
        <ul class="ty-nav-fixed">
          <li>
              <a @if($cid<5)
                class="cur"
                @endif
                 href="/m/market_coo?cid=1">碳银动态</a>
          </li>
            <li>
                <a @if($cid==5)
                  class="cur"
                  @endif
                  href="/m/market_coo?cid=5">行业动态</a>
            </li>
            <li>
                <a @if($cid==6)
                  class="cur"
                  @endif
                   href="/m/market_coo?cid=6">媒体报道</a>
            </li>
        </ul>
    </div>
    <div class="ty-news-list dropload">
        <input type="hidden" id="page" value="1">
        <ul id="dropList">
            @if(isset($listData[0]))
            @foreach ($listData as $key => $val)
            <li>
                <a class="img" href="/m/infoT?id={{$val['id']}}">
                    <img src="{{$val['picture'].'?x-oss-process=image/resize,w_458,h_264,m_fill'}}" alt="">
                    <div class="tit">{{$val['title']}}</div>
                </a>
                <div class="bot">
                    <a class="view" href="/m/infoT?id={{$val['id']}}">查看详情&gt;</a>
                    <div class="date">{{substr($val['updatetime'],0,10)}}</div>
                </div>
            </li>
            @endforeach
            @endif
        </ul>
    </div>
</div>
@endsection
@section('script')
<script src="/js/m/dropload.min.js"></script>
<script>
    (function ($) {
        $(function () {
            var page = parseInt($('#page').val());
            $('.dropload').dropload({
                scrollArea: window,
                loadDownFn: function (me) {
                    page++;
                    // 拼接HTML
                    var result = '';
                    $.ajax({
                        type: 'GET',
                        url: '/jsonlist?pageNum=' + page,
                        dataType: 'json',
                        success: function (data) {
                            var result = data.data;
                            var records = result.records;
                            var arrLen = records.length;
                            var resultHtml = '';
                            if (arrLen > 0) {
                                for (var i = 0; i < arrLen; i++) {
                                    resultHtml += '<li> ' +
                                        '<a class="img" href="/m/infoT?id=' + records[i].id + '"> ' +
                                        '<img src="' + records[i].picture + '?x-oss-process=image/resize,w_458,h_264,m_fill" alt=""> ' +
                                        '<div class="tit">' + records[i].title + '</div> ' +
                                        '</a> ' +
                                        '<div class="bot"> ' +
                                        '<a class="view" href="/m/infoT?id=' + records[i].id + '">查看详情&gt;</a> ' +
                                        '<div class="date">' + records[i].updatetime.substr(0,10) + '</div> ' +
                                        '</div> ' +
                                        '</li>';
                                }
                                $('#page').val(page);
                                // 如果没有数据
                            } else {
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                            }
                            // 插入数据到页面，放到最后面
                            $('#dropList').append(resultHtml);
                            // 每次数据插入，必须重置
                            me.resetload();
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            });
        });
    })(Zepto);
</script>
@endsection
